<template>
  <el-drawer title="訂單詳情" v-model="dialogVisible" size="40%">
    <el-card shadow="never" class="mb-3">
      <template #header>
        <b class="text-sm">訂單詳情</b>
      </template>
      <el-form>
        <el-form-item label="訂單號">{{ info.order_no }} </el-form-item>
        <el-form-item label="付款方式">
          <el-tag
            :type="
              info.pay_mode == 1 ? '' : info.pay_mode == 2 ? 'info' : 'warning'
            "
            >{{
              info.pay_mode == 1
                ? "PayPal"
                : info.pay_mode == 2
                ? "錢包"
                : "线下"
            }}
          </el-tag>
        </el-form-item>
        <el-form-item label="下單時間">{{ info.created_at }} </el-form-item>
        <el-form-item label="預約時間"
          >{{ info.date + "/" + info.time }}
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never" class="mb-3">
      <template #header>
        <b class="text-sm">商品信息</b>
      </template>
      <div class="flex items-center">
        <template v-if="info.product_item.length > 1">
          <div v-for="item in info.product_item" :key="item.id">
            <el-image
              class="ml-2"
              style="width: 50px; height: 50px"
              :src="item.cover_pic"
              :preview-src-list="[item.cover_pic]"
              :initial-index="0"
              fit="cover"
              :preview-teleported="true"
            />
            <div class="text-sm ml-3">
              <p>{{ item.name }}</p>
              <p>{{ item.price }}</p>
            </div>
          </div>
        </template>
        <div v-else>
          <el-image
            style="width: 50px; height: 50px"
            :src="info.product_item.cover_pic"
            :preview-src-list="[info.product_item.cover_pic]"
            :initial-index="0"
            fit="cover"
            :preview-teleported="true"
          />
          <div class="text-sm ml-3">
            <p>{{ info.product_item.name }}</p>
            <p>{{ info.product_item.price }}</p>
          </div>
        </div>
      </div>
    </el-card>

    <el-card shadow="never">
      <template #header>
        <b class="text-sm">收貨地址</b>
      </template>
      <el-form v-if="info.address">
        <el-form-item label="收貨人">{{ info.address[0].name }} </el-form-item>

        <el-form-item label="聯繫方式"
          >{{ info.address[0].mobile }}
        </el-form-item>
        <el-form-item label="郵箱地址"
          >{{ info.address[0].email }}
        </el-form-item>
      </el-form>
      <span v-else> 無 </span>
    </el-card>
  </el-drawer>
</template>

<script setup>
import { ref } from "vue";

defineProps({
  info: Object,
});

const dialogVisible = ref(false);

const open = () => (dialogVisible.value = true);

defineExpose({
  open,
});
</script>
